import React, { Component } from 'react'

import './Dialog.css'

export default class Dialog extends Component {

  constructor() {
    super()
    this.state = {
      id: -1,
      name: '',
      info: ''
    }
  }

  // static getDerivedStateFromProps(props, state) {
  //   console.log(props, state, 999)
  //   // 建立props属性和state数据关联
  //   state.name = props.editForm.name
  //   state.info = props.editForm.info
  //   // this.setState({
  //   //   name: props.editForm.name,
  //   //   info: props.editForm.info
  //   // })
  //   return null
  // }

  closeDialog() {
    // 调用父组件函数，关闭弹窗
    this.props.hideDialog()
    // 清空数据
    this.setState({
      id: -1,
      name: '',
      info: ''
    })
  }

  saveBrand() {
    if (this.state.id !== -1) {
      // 编辑数据
      this.props.editBrand(this.state.id, this.state.name, this.state.info)
    } else {
      // 调用父组件函数，新增品牌数据
      this.props.addBrand(this.state.name, this.state.info)
    }

    // 关闭窗口
    this.closeDialog()
  }

  render() {
    console.log(this.props, "弹窗")
    return (
      <div className="dialog-container">
        <div className="dialog-box">
          <div className="title">
            <span>新增品牌</span>
            <span onClick={this.closeDialog.bind(this)}>[关闭弹窗]</span>
          </div>
          {/* 添加表单，输入数据 */}
          <div className="form-box">
            <div>
              <label htmlFor="name">品牌名称</label>
              <input type="text" name="name" id="name"
                value={this.state.name}
                onChange={e => this.setState({ name: e.target.value })} />
            </div>
            <div>
              <label htmlFor="info">品牌描述</label>
              <input type="text" name="info" id="info"
                value={this.state.info}
                onChange={e => this.setState({ info: e.target.value })} />
            </div>
            <div>
              <button className="btn addition" onClick={this.saveBrand.bind(this)}>
                {this.state.id === -1 ? '新增品牌' : '编辑品牌'}
              </button>
            </div>
          </div>
        </div>
      </div>
    )
  }
}
